.bottom-tabbar {
  .tabbar-box {
    position: fixed;
    width: 100%;
    background: #ececec;
    left: 0;
    bottom: 0;
    .tabbar-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tabbar-item {
        flex: 1;
        margin-right: 10rpx;
        &:last-child {
          margin-right: 0;
        }
        .tabbar-item-line {
          margin-bottom: 12rpx;
          .top-line,
          .bottom-line {
            height: 14rpx;
            background: #000;
          }
          .top-line {
            margin-bottom: 4rpx;
            transform: translateY(18rpx);
            transition: all 0.1s ease-in;
          }
        }
        .tabbar-item-text {
          color: #000;
          font-family: Helvetica;
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
          line-height: 36rpx;
          /* 150% */
        }
      }
      .tabbar-item.active {
        .tabbar-item-line {
          .top-line {
            transform: translateY(0);
          }
        }
      }
    }
  }
}
